<template>
  <div>
    <van-nav-bar
        :fixed="true"
        @click-left="onClickLeft"
    >
      <div class="van-nav-bar_title" slot="title">{{ type === 'va' ? i18n.titleVA : i18n.titleFT }}</div>
      <van-icon name="arrow-left" slot="left" class="nav_bar_icon"></van-icon>
    </van-nav-bar>
    <van-row class="main">
      <div class="repay-code-main">
        <h3 class="title">{{ i18n.money }}</h3>
        <div class="item item1">
          RP {{ detailInfo.amount }}
        </div>

        <h3 class="title">{{ type === 'va' ? i18n.titleVA : i18n.titleFT }}</h3>
        <div class="item item2">
          <div>{{ detailInfo.account }}</div>
          <span>{{ i18n.date + dueDate }}</span>
        </div>

        <!--便利店名称-->
        <template v-if="type === 'shop'">
          <h3 class="title">{{ i18n.store }}</h3>
          <div class="item3">
            <img src="../assets/imgs/didian.png" alt="">
            <span>{{ detailInfo.repayment_merchant_name  }}</span>
          </div>
        </template>
      </div>
    </van-row>
  </div>
</template>

<script>
import { getLDRepayDetail } from "@/api";
import { formatDate } from "@/libs/date";

export default {
  name: "RepayCode",
  data() {
    return {
      type: this.$route.query.type,
      detailInfo: {},
    }
  },
  computed: {
    i18n() {
      return this.$t('repayCode');
    },
    dueDate() {
      if (!this.detailInfo.expire_time) return ''
      return formatDate(this.detailInfo.expire_time, 'dd-MM-yyyy hh:mm')
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'))
      const { orderId, code} = this.$route.query
      const data = {
        orderId,
        repType: this.type === 'bank' ? 1 : 2,
        payType: code
      }
      const res = await getLDRepayDetail(data, loginInfo.id)
      this.detailInfo = res.data
    },
    onClickLeft() {
      // this.$bridge.goBack();
      this.$router.go(-1);
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/css/main";

.repay-code-main {
  padding: 0 16px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC, sans-serif;

  .title {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .item {
    background: rgba(57, 197, 129, 0.1);
    border-radius: 4px;
    border: 1px solid #39C581;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #39C581;

    &.item1 {
      height: 41px;
      line-height: 41px;
      margin-bottom: 16px;
    }

    &.item2 {
      padding: 28px 0 16px;

      & > div {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 21px;
      }

      & > span {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  .item3 {
    display: flex;
    align-items: center;
    padding: 13px;
    background: #F0FBFA;
    font-size: 12px;
    font-weight: 400;
    color: #666666;

    img {
      width: 16px;
      height: 18px;
      margin-right: 4px;
    }
  }
}
</style>
